<!DOCTYPE html>
<html>
<head>
	<title>Document</title>
</head>
<style type="text/css">
#piclist{
margin:0;
padding:0;
position:relative;
}
#piclist li{
	list-style-type: none;
	position: absolute;
}
#piclist img{
	display: block;
	width: 140px;
	height: 200px;
}



</style>
<body>
	<button>随机排序</button>
	<ul id="piclist"></ul>
</body>
<script type="text/javascript">
function $(yuan){
	return document.querySelectorAll(yuan);
}
for (var i = 0; i < 12; i++) {
	var li = document.createElement("li");
	li.style.top = Math.floor(i/4)*(140+20)+"px";
	li.style.left = i%4*(140+20)+"px";
	li.innerHTML="<img src='C:/Users/14129/Desktop/10月1的作业（做得）/10.1/pc/img/宠物/64ce-fyqtwzu8418073.jpg'"+(i+1)+"/>"
	$("#piclist")[0].appendChild(li);
	li.style.top=Matc=h.floor(i/4)*(parseInt(getComputedStyle(li).height)+20)+"px";
	li.style.left = i%4*(parseInt(getComputedStyle)+width+m)+"px";
}
init(15,50);


</script>
</html>